<template>
    <div class="detail-container">
      <!-- 出入库信息 -->
      <div class="info-card">
        <div class="info-item">
          <span class="label">出入库类型：</span>
          <span class="value">{{ detailInfo.type == 1 ? '入库' : '出库' }}</span>
        </div>
        <div class="info-item">
          <span class="label">状态：</span>
          <span v-if="detailInfo.applyStatus == 4" class="status-pending">待出库</span>
          <span v-if="detailInfo.applyStatus == 6" class="status-complete">{{ detailInfo.type == 1 ? '已入库' : '已出库' }}</span>
        </div>
        <div class="info-item">
          <span class="label">出入库时间：</span>
          <span class="value">{{ detailInfo.receviceTime || '--' }}</span>
        </div>
        <div class="info-item">
          <span class="label">保管员：</span>
          <span class="value">{{ detailInfo.receiveUserName }}</span>
        </div>
        <div class="info-item" v-if="detailInfo.type != 1">
          <span class="label">领取部门：</span>
          <span class="value">{{ detailInfo.departName }}</span>
        </div>
        <div class="info-item" v-if="detailInfo.type != 1">
          <span class="label">领取人：</span>
          <span class="value">{{ detailInfo.applyName }}</span>
        </div>
      </div>
  
      <!-- 物品清单 -->
      <div class="goods-section">
        <div class="section-title">物品清单</div>
        <div class="goods-list">
          <div v-for="(item, index) in list" :key="index" class="goods-item">
            <div class="goods-name" style="display: flex;justify-content: space-between;">
                <span  style="font-weight: bold;">{{ item.goodsName }}</span> 
                <span >单价：￥{{ item.unitPrice }}元/{{ item.goodsUnit }}</span>
            </div>
            <div class="goods-detail">
              <div class="amount-info">
                <div>数量：{{ item.goodsAmount }}{{ item.goodsUnit }}</div>
                <div>金额：<span class="price">￥{{ item.amount }}</span></div>
              </div>
              <div class="remark">备注：{{ item.remark || '' }}</div>
            </div>
          </div>
        </div>
      </div>
  
      <!-- 合计金额 -->
      <div class="total-amount">
        合计金额：<span class="price">￥{{ detailInfo.amount }}</span>
      </div>

      <div class="button-group" v-if="detailInfo.applyStatus == 4 && detailInfo.type == 2">
        <van-button 
            type="primary" 
            block
            @click="handOutput"
        >
            出库
        </van-button>
        </div>
    </div>
  </template>
  
  <script>
  import { Toast } from 'vant';
  import { getApplyRecordDetails , handleOutStock } from '@/api/outputDetail';
  
  export default {
    data() {
      return {
        list: [],
        detailId: 0,
        detailInfo: {
          type: 0,
          applyStatus: 0,
          receviceTime: '',
          receiveUserName: '',
          departName: '',
          applyName: '',
          amount: ''
        }
      };
    },
    created() {
      const { id = 0 } = this.$route.query;
      this.detailId = id;
      this.loadDetailData();
    },
    methods: {
      loadDetailData() {
        const params = {
          openSessionId: JSON.parse(localStorage.getItem('user'))?.openSessionId,
          applyId: this.detailId
        };
  
        getApplyRecordDetails(params)
          .then(res => {
            if (res.code === 200) {
              const data = res.data;
              this.detailInfo = data;
              this.list = data.suppliesList;
            } else {
              Toast.fail(res.message || '获取详情失败');
            }
          })
          .catch(err => {
            console.error(err);
            Toast.fail('获取详情失败');
          });
      },
      handOutput() {
        const params = {
            openSessionId: JSON.parse(localStorage.getItem('user'))?.openSessionId,
            applyId: Number(this.detailId)
        }

        handleOutStock(params)
            .then(res => {
            if (res.code === 200) {
                this.$router.back()
                Toast.success(res.message)
            } else {
                Toast.fail(res.message)
            }
            })
            .catch(err => {
            console.error(err)
            Toast.fail('操作失败')
            })
        }
    }
  };
  </script>
  
  <style lang="scss" scoped>
.detail-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 12px;
}

.info-card {
  background: #fff;
  border-radius: 4px;
  padding: 0 15px;
  margin-bottom: 15px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  
  &:last-child {
    border-bottom: none;
  }

  .label {
    color: #666;
  }

  .value {
    color: #333;
  }
}

.goods-section {
  background: #fff;
  border-radius: 4px;
  padding: 12px 15px;
  margin-bottom: 15px;
  text-align: left; /* 添加左对齐 */
}

.section-title {
  font-size: 14px;
  color: #333;
  margin-bottom: 12px;
  border-bottom: 1px solid #eee;
  padding-bottom: 12px;
  text-align: left; /* 添加左对齐 */
}

.goods-item {
  background: #fff;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  text-align: left; /* 添加左对齐 */

  &:last-child {
    border-bottom: none;
  }
}

.goods-name {
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
  text-align: left; /* 添加左对齐 */
}

.goods-detail {
  color: #666;
  font-size: 14px;
  text-align: left; /* 添加左对齐 */
  
  .price-info {
    margin-bottom: 8px;
  }

  .amount-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
  }

  .remark {
    color: #999;
  }
}

.price {
  color: #1989fa;
}

.total-amount {
  background: #fff;
  padding: 12px 15px;
  text-align: right;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
}

.status-pending {
  color: #07c160;
}

.status-complete {
  color: #07c160;
}
.button-group {
  margin-top: 20px;
  padding: 0 15px;
  
  .van-button {
    width: 100%;
  }
}
</style>